<template>
  <div class="search_box box_wrap">
    <p class="tips">修改密码</p>
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-position="right"
      label-width="100px"
      size="large"
      class="form_box"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="旧密码：" prop="oldPassword">
            <el-input
              v-model="formData.oldPassword"
              placeholder="请输入旧密码"
              clearable
              type="password"
              show-password
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="新密码：" prop="newPassword">
            <el-input
              v-model="formData.newPassword"
              placeholder="请输入不低于8位字符的密码"
              clearable
              type="password"
              show-password
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="确认密码：" prop="confirmPassword">
            <el-input
              v-model="formData.confirmPassword"
              placeholder="请输入不低于8位字符的密码"
              clearable
              type="password"
              show-password
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px" v-auth="'api:agent:user:editPassword'">
        <el-col :span="12">
          <el-form-item label="">
            <el-button type="primary" @click="cancel(ruleFormRef)">
              <el-icon> <Close /> </el-icon>
              取 消
            </el-button>
            <el-button type="primary" @click="comfirm(ruleFormRef)">
              <el-icon> <Check /> </el-icon>
              确认修改
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import { cloneDeep } from "lodash-es";
import { Close, Check } from "@element-plus/icons-vue";
import { updatePassword } from "@/api/userManage/index";
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();

const ruleFormRef = ref<FormInstance>();
const form = {
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
};
const formData = ref(Object.assign({}, form));

const validataPass = (rule: any, value: any, callback: any) => {
  // 匹配包含数字、字母或者字符的8-16位正则表达式
  let reg = /^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{8,16}$/;
  if (value === "") {
    callback(new Error("请输入不低于8位字符的密码"));
  } else if (value.length > 16 || value.length < 8) {
    callback(new Error("请输入8~16位之间字符的密码"));
  } else if (!reg.test(value)) {
    callback(new Error("密码只能输入数字、字母和符号"));
  } else {
    callback();
  }
};
const validataconfirmPass = (rule: any, value: any, callback: any) => {
  if (value !== formData.value.newPassword) {
    callback(new Error("新密码与确认密码不一致"));
  } else {
    callback();
  }
};

const rules = reactive({
  oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  newPassword: [{ required: true, validator: validataPass, trigger: "blur" }],
  confirmPassword: [
    { required: true, validator: validataconfirmPass, trigger: "blur" },
  ],
});

// 取消
const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl?.resetFields();
  Object.assign(formData.value, form);
};

// 确认修改
const comfirm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      updatePassword(formData.value).then(() => {
        ElMessage.success(`修改成功`);
        window.location.href = `/login`;
        cancel(ruleFormRef.value);
        userStore.clearToken();
        localStorage.removeItem("userAppid");
        localStorage.removeItem("userApps");
        userStore.user.name = "";
      });
    }
  });
};
</script>
<style scoped lang="scss">
.box_wrap {
  min-height: calc(100vh - 70px);

  .tips {
    padding-left: 20px;
    margin: unset;
    font-size: 20px;
    line-height: 70px;
    color: #666;
    border-bottom: 1px solid #eee;
  }

  .form_box {
    margin-top: 20px;
  }
}
</style>
